<template>
	<view class="content">
		<swiper class="swiperBox">
			<swiper-item class="swiperItem" v-for="(item,index) in data.thumb" :key="index">
				<image :src="item.url" class="swiperItem"></image>
			</swiper-item>
		</swiper>
		<text class="typeTitle">{{data.name}}</text>
		<view class="priceBox">
			<text class="price">￥{{data.price}}</text>
			<text class="have">已预约{{data.sale_num}}次</text>
		</view>
		<orderTimeBox :serviceId="id" :month="month" :yearArr="yearArr" title="预定上门时间"
			@time-selected="handleTimeSelected" @date-selected="handleDateSelected"
			@month-changed="handleMonthChanged" />
		<commentBox :comment="comment" :serviceId="id" />
		<view class="infoBox">
			<text class="infoLabel">服务详情</text>
			<mp-html v-if="data.desc" :content="data.desc" />
		</view>
		<view class="menuBox">
			<view class="left" @click="$switchTab('/pages/index/index')">
				<image :src="baseUrl+'img/index/home.png'" class="home"></image>
				<text class="homeLabel">首页</text>
			</view>
			<view class="center">
				<image :src="baseUrl+'img/service/service.png'" class="service"></image>
				<text class="serviceLabel">客服</text>
			</view>
			<view class="submit" @click="submit">
				立即下单
			</view>
		</view>
	</view>
</template>
<script>
	import orderTimeBox from '@/components/orderTimeBox.vue';
	import commentBox from '@/components/commentBox.vue';
	import serverMixin from '@/mixins/serverMixin.js';
	export default {
		mixins: [serverMixin],
		components: {
			orderTimeBox,
			commentBox
		},
		data() {
			return {
				isLogon: false,
			}
		},
		onShow() {
			this.getData();
		},
		methods: {
			// 获取用户数据
			getData() {
				this.$request.get('center').then(res => {
					console.log(res)
					if (res.data.data.phone > 0) {
						this.isLogon = true;
					}
				});
			},
			submit() {
				if (this.isLogon == false) {
					return this.$navto.navto('/pages/login/login');
				}
				if (!this.date) {
					return this.$toast('请选择日期');
				}
				if (!this.time) {
					return this.$toast('请选择时间');
				}
				this.$store.commit('setTempData', this.$data);
				this.$navto.navto("/pages/service_cleaning_submit/service_cleaning_submit")
			},
		}
	}
</script>
<style lang="scss" scoped>
	.menuBox {
		width: 100%;
		height: 130rpx;
		display: flex;
		position: fixed;
		bottom: 0rpx;
		// justify-content: space-between;
		margin-top: 40rpx;
		padding-top: 10rpx;
		border-top: 1rpx solid #cccccc;
		background-color: #FFFFFF;
		padding-left: 40rpx;
		padding-right: 40rpx;
		box-sizing: border-box;

		.submit {
			width: 480rpx;
			height: 80rpx;
			border-radius: 40rpx;
			background: #121212;
			display: flex;
			align-items: center;
			justify-content: center;
			font-weight: 700;
			font-size: 28rpx;
			color: #FFFFFF;
			letter-spacing: 5rpx;
			margin-left: auto;
		}

		.center {
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-left: 40rpx;

			.serviceLabel {
				font-weight: 500;
				font-size: 18rpx;
				color: #121212;
			}

			.service {
				width: 48rpx;
				height: 48rpx;
			}
		}

		.left {
			display: flex;
			flex-direction: column;
			align-items: center;

			.homeLabel {
				font-weight: 500;
				font-size: 18rpx;
				color: #121212;
			}

			.home {
				width: 48rpx;
				height: 48rpx;
			}
		}
	}

	.infoBox {
		padding: 70rpx 40rpx 150rpx 40rpx;
		display: flex;
		flex-direction: column;

		.infoLabel {
			font-weight: 700;
			width: 100%;
			text-align: center;
			font-size: 34rpx;
			color: #121212;
			letter-spacing: 5rpx;
			margin-bottom: 70rpx;
		}
	}


	::v-deep .uni-select {
		border: none;
	}

	::v-deep .uni-select .uni-icons {
	  display: none;
	}

	::v-deep .uni-select__input-box {
		opacity: 0 !important;
	}

	.priceBox {
		display: flex;
		width: 670rpx;
		margin-left: 40rpx;
		margin-top: 45rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-bottom: 40rpx;
		padding-top: 40rpx;
		border-top: 1rpx solid #8E8E8E;

		.have {
			font-weight: 500;
			font-size: 22rpx;
			color: #cccccc;
		}

		.price {
			font-weight: 700;
			font-size: 30rpx;
			color: #121212;
		}
	}

	.typeTitle {
		font-weight: 700;
		width: 670rpx;
		margin-left: 40rpx;
		font-size: 40rpx;
		color: #121212;
		margin-top: 50rpx;
		display: block;
	}

	.swiperBox {
		width: 750rpx;
		height: 600rpx;

		.swiperItem {
			width: 100%;
			height: 100%;
		}
	}

	.content {
		width: 100%;
		height: 100vh;
		overflow-x: hidden;
	}
</style>